<template>
  <nav class="tab-bar border-top">
    <router-link
      class="tab-item"
      v-for="item in tabData"
      :key="item.id"
      :to="{ name: item.id }"
    >
      <span class="iconfont" :class="item.icon"></span>
      <span class="text">{{ item.title }}</span>
    </router-link>
  </nav>
</template>

<script>
export default {
  name: 'tab-bar',
  data() {
    return {
      tabData: [
        {
          id: "home",
          title: "首页",
          icon:"icon-shouye"
        },
        {
          id: "spot",
          title: "发现",
          icon:"icon-faxian"

        },
        {
          id: "chat",
          title: "聊天",
          icon:"icon-liaotian"
        },
        {
          id: "mine",
          title: "我的",
          icon:"icon-31wode"
        },
      ],
    };
  },
  methods: {
  },
};
</script>


<style lang="scss" scoped>
.tab-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 49px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;

  .tab-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #666;
    transform: scale(0.7);
    text-decoration: none;
    &.router-link-active {
      color: #ff6666;
    }
    .iconfont {
      font-size: 30px;
    }
    .text {
      margin-top: 4px;
      font-size: 20px;

    }
  }
}
</style>
